<template>
	<fu-loading v-if="!init"></fu-loading>
	<view class="page" v-else>
		<!-- 自定义头部 start -->
		<view class="cu-custom header">
			<view class="cu-bar fixed bg act" :style="{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' ,}">
				<view class="action" @tap="BackPage">
					<text class="cuIcon-back"></text>
				</view>
				<view class="content" :style="[{ top: StatusBar + 'px' }]">会员中心</view>
			</view>
			<view :style="{ height: CustomBar + 'px' }"></view>
		</view>
		<!-- 自定义头部 end -->

		<view class="bg-top">
			<view class="card" v-if='vipInfo.is_vip <1'>
				<view class="flex head_info">
					<view class="image">
						<fu-image :src="vipInfo.head_img " mode="aspectFill" radius="50%"></fu-image>
					</view>
					<view>
						<view class="info-name">{{vipInfo.user_name}}</view>
						<view class="info-content">{{i18n['您当前未开通会员']}}</view>
					</view>

				</view>
				<view class="flex justify-between info-bottom">
					<view>
						购买商品享受会员价
					</view>
				</view>
			</view>
			<view class="card-2" v-if='vipInfo.is_vip >=1'>
				<view class="flex head_info">
					<view class="image">
						<fu-image :src="vipInfo.head_img " mode="aspectFill" radius="50%"></fu-image>
					</view>
					<view>
						<view class="info-name">{{vipInfo.user_name}}</view>
						<view class="flex align-center" style="margin-top: 8rpx;">
							<image :src="imgBaseUrl + 'member/vipLogo.png'" mode="" style="width: 25.41rpx;height: 22.48rpx;"></image>
							<text class="text-theme">平台会员</text>
						</view>
						<view class="info-content">{{i18n['有效期']}}： {{vipInfo.vip_last_time}}</view>
					</view>

				</view>
				<view class="flex justify-between info-bottom">
					<view>
						购买商品享受会员价
					</view>
				</view>

			</view>
			<!-- <view class="bg-bottom">
				<image :src="imgBaseUrl + 'member/bg-bottom.png'"/>

			</view> -->
			
			<view class="info">
				<view class="h4">
					{{i18n['会员权益']}}
				</view>
				<view class="flex align-center" style="margin-top: 32rpx;">
					<view class="flex align-center flex-direction">
						<image :src="imgBaseUrl + 'member/m-1.png'" mode="" style="width: 80rpx;height: 80rpx;margin-bottom: 20rpx;"></image>
						
						<text style="font-size: 24rpx;">全渠道购物</text>
					</view>
					<view class="flex align-center flex-direction" style="margin-left: 61rpx;">
						<image :src="imgBaseUrl + 'member/m-2.png'" mode="" style="width: 80rpx;height: 80rpx;margin-bottom: 20rpx;"></image>
						
						<text style="font-size: 24rpx;">体验有保障</text>
					</view>
					<view class="flex align-center flex-direction" style="margin-left: 61rpx;">
						<image :src="imgBaseUrl + 'member/m-3.png'" mode="" style="width: 80rpx;height: 80rpx;margin-bottom: 20rpx;"></image>
						
						<text style="font-size: 24rpx;">省钱无忧购</text>
					</view>
				</view>
			</view>

		</view>
	


	
		<view class="btn" @tap="openVip()">
			<text v-if='vipInfo.is_vip <1'> {{i18n['立即购买']}}￥{{vipInfo.vip_money}}/年</text>
			<text v-if='vipInfo.is_vip >=1'> {{i18n['立即续费']}}￥{{vipInfo.vip_money}}/年</text>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				activiteIndex: 0,
				init: '',
				price: '',
				userInfo: {}, // 当前登录用户的用户信息
				order_sn: '',
				level_id: '',
				vipInfo: {},
				gradeListvip: [],
			}
		},
		computed: {
			content() {
				var val = ''
				if (this.gradeListvip[this.activiteIndex]) {
					val = this.gradeListvip[this.activiteIndex].content.replace(/\n/g, '<br/>');
				}
				return val
			}
		},
		onShow() {
			this.getmemberuserInfovip()
			this.getmemberListvip() // 获取vip等级列表
		},
		onLoad() {
			// 用户信息
			let userInfo = this.$store.state.userInfo;
			this.userInfo = userInfo || {};
		},
		methods: {
			// 获取vip等级列表
			getmemberListvip() {
				this.$api.post(global.apiUrls.memberListvip, {
				}).then(res => {
					if (res.data.code == 1) {
						this.gradeListvip = res.data.data

					}
				})
			},
			switchChange(val, item) {
				this.activiteIndex = val
				this.price = item.price
				this.level_id = item.id
			},
			// 获取用户会员信息
			getmemberuserInfovip() {
				this.$api.post(global.apiUrls.memberuserInfovip, {
				}).then(res => {
					if (res.data.code == 1) {
						console.log(res.data)
						this.init = true;
						this.vipInfo = res.data.data
					}
				})
			},
			//返回上一页
			BackPage() {
				uni.navigateBack({
					delta: 1
				});
			},
			openVip() {
				this.$util.debounce(() => {
					var data = {
						payable_money:this.vipInfo.vip_money ,
						order_type: '16',
						invoice_list:0
					}
					this.$api.post(global.apiUrls.postAddOrder, data).then(res => {
						if (res.data.code == 1) {
							console.log(res)
							this.$message.info(this.i18n['请支付…']);
							setTimeout(() => {
								this.$urouter.navigateTo({
									url: "/pages/member/vip/pay-vip/index",
									params: {
										order_sn: res.data.data.order_sn,
									},
								});
							}, 800);

						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
						}
					})
				}, 1500, true);
			}
		}
	}
</script>

<style lang="scss">
	page {
		
background: #F6F6F6;
	}

	.page {
		background: url($IMG_BASE_URL + 'member/isvipback.png') no-repeat;
		background-size: 100% 717rpx;
	}

	/deep/.cu-bar .action:first-child>uni-text[class*="cuIcon-"] {
		color: #FFF;
	}

	.header {
		color: #FFF;

		.act {
			background: url($IMG_BASE_URL + 'member/isvipback.png') no-repeat top;
		}
	}

	.bg-top {
		height:717rpx;
		background: url($IMG_BASE_URL + 'member/isvipback.png') no-repeat top;
		background-size: 100% 100%;
		margin-top: -88rpx;
		position: relative;
	}

	.card {
		color: #333333;
		margin-top: 105rpx;
		left: 50%;
		margin-left: -351rpx;
		width: 702rpx;
		height: 404rpx;
		background: url($IMG_BASE_URL + 'member/supervip-03-1.png') no-repeat top;
		background-size: 100% 100%;
		position: absolute;

		.head_info {
			margin: 74rpx 32rpx 32rpx 40rpx;
		}

		.image {
			width: 88rpx;
			height: 88rpx;
			margin-right: 24rpx;
			border-radius: 50%;
		}

		.info-name {
			font-size: 32rpx;
			color: #333333;
			font-weight: bold;
		}

		.info-content {
			color: #7D6E71;
			font-size: 26rpx;
			margin-top: 8rpx;
			font-weight: bold;
		}

		.info-bottom {
			color: #000000;
			position: absolute;
			bottom: 48rpx;
			width: 100%;
			padding: 0 40rpx;
			font-size: 32rpx;
			font-weight: bold;
		}

		.btn {
			position: absolute;
			bottom: 32rpx;
			left: 50%;
			margin-left: -160rpx;
			width: 320rpx;
			height: 72rpx;
			background-color: #fff;
			color: #4B4B55;
			line-height: 72rpx;
			border-radius: 16rpx;
			text-align: center;
		}
	}

	.card-2 {
		color: #333333;
		margin-top: 105rpx;
		left: 50%;
		margin-left: -351rpx;
		width: 702rpx;
		height: 404rpx;
		background: url($IMG_BASE_URL + 'member/supervip-03-1.png') no-repeat top;
		background-size: 100% 100%;
		position: absolute;

		.head_info {
			margin: 74rpx 32rpx 32rpx 40rpx;
		}
		
		.image {
			width: 88rpx;
			height: 88rpx;
			margin-right: 24rpx;
			border-radius: 50%;
		}
		
		.info-name {
			font-size: 32rpx;
			color: #333333;
			font-weight: bold;
		}
		
		.info-content {
			color: #7D6E71;
			font-size: 26rpx;
			margin-top: 8rpx;
			font-weight: bold;
		}
		
		.info-bottom {
			color: #000000;
			position: absolute;
			bottom: 48rpx;
			width: 100%;
			padding: 0 40rpx;
			font-size: 32rpx;
			font-weight: bold;
		}

		.info-img {
			width: 48rpx;
			height: 26rpx;
			margin-top: 8rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.info {
		padding: 32rpx;
		// margin-top: 16rpx;
		background: #ffffff;
		// margin: 24rpx;
		left: 24rpx;
		right: 24rpx;
		border-radius: 16rpx;
		position: absolute;
		bottom: -82rpx;

		.h4 {
			font-size: 32rpx;
			color: #333333;
			margin-bottom: 24rpx;
			font-weight: 600;
		}

		.p {
			font-size: 24rpx;
			color: #333333;
			line-height: 2;
		}
	}

	.btn {
		// width: 100%;
		padding: 0 32rpx;
		position: fixed;
		bottom: 48rpx;
		box-sizing: border-box;
		background: $bgtheme;
		border-radius: 16rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		left: 32rpx;
		right: 32rpx;
		
		// padding: 22rpx 279rpx;

		text {
			
			// display: block;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}

	.bg-bottom {
		position: relative;
		width: 100%;
		height: 122rpx;
		top: 332rpx;

		image {
			width: 100%;
			height: 122rpx;
		}
	}

	.nav {
		// margin-top: 60rpx;
		// padding-top: 24rpx;

		.active {
			background: #FFF7F8;
			border: 2rpx solid #FA2033;
		}
	}

	.nav-item {
		flex-shrink: 0;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-right: 24rpx;
		width: 202rpx;
		height: 250rpx;
		text-align: center;
		padding: 40rpx 0;

		.price {
			font-size: 44rpx;
			margin-top: 24rpx;
		}

		.line-price {
			text-decoration: line-through;
		}
	}
</style>
